

<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:频道子页
@author:成都市一颗优雅草科技有限公司     
@version V5.x 
注意：本前端源码遵循 MulanPSL-2.0开源协议（木兰宽松许可证）本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   企业客服QQ:2853810243  官方客户·技术交流群 929353806交流群 929353806

 -->


<template>
	<view>
		<!-- 顶部开始 -->
		<view class="head-wrapper shadow">
			<view class="left-wrapper" @click="back">
				<uni-icons color="#000000" class="back" size="30" type="arrowleft" />
			</view>
			<view class="search-wrapper">
				<text class="uni-title">{{title}}</text>
			</view>
			<view class="seach" @click="seach">
				<image src="/static/home/seach.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 顶部结束 -->

		<view class="content-wrapper" >
			<view class="typp-list-wrapper" v-if="typeList">
				<view class="type-item" v-for="(item,idx) in typeList" :key="idx" @tap="tapItem(item)">
					<image :src="formatUrl(item.icon)"></image>
					<text>{{item.name}}</text>
				</view>
			</view>			
		</view>

	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	export default {
		components: {
			uniIcons,
		},
		data() {
			return {
				isMore:true,
				loadmore:false,
			}
		},
		created() {
			

		},
		onShow() {

		},
		methods: {
			seach() {
			
				uni.navigateTo({
					url: '/pages/index/user/category-search/category-search',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			tapItem(item){
				uni.navigateTo({
					url:'/pages/index/channel/subTypeList/videoList?type='+item.id+'&title='+item.name
				})
			},
			//格式化链接地址
			formatUrl(url) {
				if (url == undefined) {
					return;
				}
				var index = url.indexOf("http");
				if (index == 0) {
					return url;
				}
				return this.$store.state.baseUrl + url;
			},
		},
		created(){
		},
		computed:{
			typeList(){
				return this.$store.state.subType.sub_type;
			},
			title(){
				return this.$store.state.subType.name;
			}
		},
		mounted() {
			
		}
	}
</script>

<style lang="scss">
	.head-wrapper {
		align-items: center;
		position: fixed;
		//#ifdef APP-PLUS
		padding-top: 44rpx;
		//#endif
		z-index: 1;
		left: 0;
		right: 0;
		background: $uni-bg-color;
		width: 100%;
		display: flex;
		flex-direction: row;
		height: 88rpx;
	}
	.content-wrapper {
		position: relative;
		padding-top: 88rpx;
		padding-bottom: 123rpx;
		//#ifdef APP-PLUS
		padding-top: 128rpx;
		//#endif
	
		height: 100%;
		width: 100%;
	} 
	.shadow {
		box-shadow: 0 1px 6px #ccc;
	}
	
	.title-wrap {
		flex: 11;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	
	
	.seach {
		flex:1;
		display: flex;
		flex-direction: row;
		position: relative;
		right: 0rpx;
		justify-content: flex-end;
		align-items: center;
		image {
			display: inline-block;
			width: 35rpx;
			height: 25rpx;
			margin-right: 25rpx;
	
		}
	}
	.typp-list-wrapper{
		margin-top: 24rpx;
		flex: 1;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		
		.type-item {
			height: 400rpx;
			justify-content: center;
			align-items: center;
			align-content: center;
			width: 50%;
			display: flex;
			flex-direction: column;
		
			image {
				width: 300rpx;
				height: 300rpx;
			}
		
			text {
				margin-top: 12rpx;
				letter-spacing: 4rpx;
			}
		}
	}
	.left-wrapper {
		margin-left: 12rpx;
		height: 88rpx;
		line-height: 88rpx;
		flex-direction: row;
		// background: #007AFF;
		justify-content: center;
		flex: 1;
	}
	.search-wrapper {
		text-align: center;
		line-height: 76rpx;
		height: 76rpx;
		//background: #09BB07;
		flex: 10;
		flex-direction: row;
		align-items: center;
		align-content: center;
		justify-content: center;
	
		text {
			line-height: 76rpx;
			height: 76rpx;
		}
	}
</style>
